<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/utils/bootstrap.min.css" />
    <link rel="stylesheet" href="../../css/utils/toastr.min.css" />
    <link rel="stylesheet" href="../../css/utils/common.css?version=1" />
	<title></title>
	<style>
		.table-tree-point {
			width: 20px;
			height: 20px;
		}
		.show-article {
			display: none;
		}
		.index-td {
			display: none;
		}
		.show-article .table thead tr {
			background-color: #EAEAEA;
		}
		.show-article .table thead th {
			color: #666666;
		}
		.rotate90 {
			-webkit-transform: rotate(90deg);
		    -ms-transform: rotate(90deg);
		    transform: rotate(90deg);
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="table-list">
			<table class="table table-bordered table-hover table-striped">
				<thead>
					<tr>
						<th>展开</th>
						<th>头像</th>
						<th>昵称</th>
						<th>性别</th>
						<th>地区</th>
						<th>电话号码</th>
						<th>详情</th>
					</tr>
				</thead>
				<tbody id="customertbody">
					<!--<tr>
						<td><img class="table-tree-point" src="../../img/myExtension/table-tree-right.png" /></td>
						<td><img class="border-radius-30" src="../../img/headimg.jpg" /></td>
						<td>多浪</td>
						<td>男</td>
						<td>贵州贵阳市云岩区安云路樱花巷科技情报所</td>
						<td>1383838438</td>
						<td><button class="btn btn-default">详情</button></td>
						<tr>
							<td style="padding: 0;" colspan="7">
								<table style="margin-bottom: 0;" class="table table-bordered table-hover table-striped">
									<thead>
										<tr>
											<th>文章标题</th>
											<th>层级</th>
											<th>转发朋友/群</th>
											<th>转发朋友圈</th>
											<th>阅读次数</th>
											<th>每次阅读时长</th>
											<th>是否报名</th>
											<th>是否加微信</th>
											<th>打电话<br />（次数）</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>文章标题放假快乐圣诞</td>
											<td>1</td>
											<td>11</td>
											<td>4</td>
											<td>20</td>
											<td>1/1-2分钟 2/0-10秒 3/0-10秒</td>
											<td>是</td>
											<td>是</td>
											<td>2</td>
										</tr>
									</tbody>
								</table>
							</td>
						</tr>
					</tr>
					<tr>
						<td><img class="table-tree-point" src="../../img/myExtension/table-tree-right.png" /></td>
						<td><img class="border-radius-30" src="../../img/headimg.jpg" /></td>
						<td>多浪</td>
						<td>男</td>
						<td>贵州贵阳市云岩区安云路樱花巷科技情报所</td>
						<td>1383838438</td>
						<td><button class="btn btn-default">详情</button></td>
					</tr>-->
				</tbody>
			</table>
			<nav id="page" class="text-center" aria-label="Page navigation">
				<ul class="pagination">
				</ul>
			</nav>
		</div>	
	</div>
	<script type="text/javascript" src="../../js/utils/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/jquery.cookie.js" ></script>
	<script type="text/javascript" src="../../js/utils/page.js" ></script>
	<script type="text/javascript" src="../../js/utils/toastr.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/boot.js" ></script>
	<script>
		var userID,companyID;
		var isLookCol = [];//初始化每行数据的展开状态
		var articleID = base.getParameter("articleID");
		var tempPageNo = 1;
		$(function(){
			userID = $.cookie("userID");
			companyID = $.cookie("companyID");
			toastr.options = {
                "timeOut": 2000,
                "positionClass": "toast-middle-center"
           	};
           	getAnalyseInfoList();
		});
		//获取深度分析客户
		function getAnalyseInfoList(){
			base.postData(base.url.getAnalyseInfo, {articleID:articleID,pageNo:tempPageNo,userID:userID,companyID:companyID}, callbackGetAnalyseInfo);
		}
		function callbackGetAnalyseInfo(data) {
			if (data.success) {
				if (tempPageNo == 1) {
					var _totalPage = Math.ceil(data.context.totalPage/10)||1;
					//初始化分页
					var page = {
						pageIndex:1,//初始页
						currentPage:1,//当前页
						showPage:5,//显示页数
						totalPage:_totalPage,//总页数
						onPageClick: function(page) {
							tempPageNo = page.currentPage;
							getAnalyseInfoList();
							$("#page").initPage(page);
			    			return false;  //默认的翻页事件
					    }
					};
				}
				$("#page").initPage(page);
				$("#customertbody").html(getCustomerInfoListHtml(data.context.customerInfo));
			} else {
				toastr.error(data.msg);
			}
		}
		function getCustomerInfoListHtml(list) {
			var html = '';
			for (var index in list) {
				isLookCol.push(false); //默认全部为隐藏状态
				html += '<tr>'
				html += '	<td class="index-td">'+index+'</td>'
				html += '	<td><img class="table-tree-point" src="../../img/myExtension/table-tree-right.png" /></td>'
				html += '	<td><img class="border-radius-30" src="'+list[index].headImgUrl+'" /></td>'
				html += '	<td>'+list[index].nickName+'</td>'
				html += '	<td>'+(list[index].sex==1?"男":list[index].sex==2?"女":"未知")+'</td>'
				html += '	<td>'+list[index].area +'</td>'
				html += '	<td>'+list[index].phone +'</td>'
				html += '	<td><input type="hidden" name="customerID" value="'+list[index].customerId+'" /><button class="btn btn-default">详情</button></td>'
				html += '</tr>'
				html += '<tr class="show-article">'
				html += '	<td style="padding: 0;" colspan="7">'
				html += '		<table style="margin-bottom: 0;" class="table table-bordered table-hover table-striped">'
				html += '			<thead>'
				html += '				<tr>'
				html += '					<th>文章标题</th>'
				html += '					<th>层级</th>'
				html += '					<th>转发朋友/群</th>'
				html += '					<th>转发朋友圈</th>'
				html += '					<th>阅读次数</th>'
				html += '					<th>每次阅读时长</th>'
				html += '					<th>是否报名</th>'
				html += '					<th>是否加微信</th>'
				html += '					<th>打电话<br />（次数）'
				html += '				</tr>'
				html += '			</thead>'
				html += '			<tbody class="inside-tbody">'
				for(var i in list[index].articleAnalyseInfoList) {
					var readTime = "";
					for (var j=0; j<list[index].articleAnalyseInfoList[i].readTimeList.length; j++) {
						readTime += (j+1)+"/"+list[index].articleAnalyseInfoList[i].readTimeList[j]+"-"+(list[index].articleAnalyseInfoList[i].readTimeList[j]+10)+"s ";
					}
					var readTime = "";
					for (var j=0; j<list[index].articleAnalyseInfoList[i].readTimeList.length; j++) {
						var time = "";
						if (list[index].articleAnalyseInfoList[i].readTimeList[j] < 60) {
							time = list[index].articleAnalyseInfoList[i].readTimeList[j] + "-" + (list[index].articleAnalyseInfoList[i].readTimeList[j] + 10) + "秒 ";
						}else{
							time = parseInt(list[index].articleAnalyseInfoList[i].readTimeList[j]/60);
							if (time < 2) {
								time = "1-2分钟 ";
							}else if (time < 5) {
								time = "2-5分钟 ";
							}else if (time >= 5) {
								time = "5分钟以上 ";
							}
						}
						readTime += (j+1)+"/"+time;
					}
					html += '				<tr>'
					html += '					<td>'+list[index].articleAnalyseInfoList[i].articleTitle+'</td>'
					html += '					<td>'+list[index].articleAnalyseInfoList[i].level+'</td>'
					html += '					<td>'+list[index].articleAnalyseInfoList[i].transpondFriend+'</td>'
					html += '					<td>'+list[index].articleAnalyseInfoList[i].transpondCircleOfFriends+'</td>'
					html += '					<td>'+list[index].articleAnalyseInfoList[i].readNum+'</td>'
					html += '					<td>'+readTime+'</td>'
					html += '					<td>'+(list[index].articleAnalyseInfoList[i].isEnroll == 1?"是":"否")+'</td>'
					html += '					<td>'+(list[index].articleAnalyseInfoList[i].isJoinWX == 1?"是":"否")+'</td>'
					html += '					<td>'+list[index].articleAnalyseInfoList[i].callNum+'</td>'
					html += '				</tr>'
				}
				html += '			</tbody>'
				html += '		</table>'
				html += '	</td>'
				html += '</tr>'
			}
			return html;
		}
		$("#customertbody").on("click", ".table-tree-point", function() {
			var indexTD = $(this).closest("tr").find(".index-td").text();//获取当前点击元素的下标
			var trs = $("tr[class='show-article']"); 
			for(i = 0; i < trs.length; i++){ 
				if (i == indexTD) {//当点击的下标等于隐藏元素的下标时 注：因为每行父层都有子层 所以此处这样写法
					if (isLookCol[i]) { //当前隐藏显示数组为true时 隐藏子table 同时改变当前隐藏显示数组的元素
						$(this).removeClass("rotate90");
						isLookCol[i] = false;
						trs[i].style.display = "none"; //这里获取的trs[i]是DOM对象而不是jQuery对象，因此不能直接使用hide()方法 
					} else {//当前隐藏显示数组为false时 隐藏子table 同时改变当前隐藏显示数组的元素
						$(this).addClass("rotate90");
						isLookCol[i] = true;
						trs[i].style.display = "table-row"; //这里获取的trs[i]是DOM对象而不是jQuery对象，因此不能直接使用hide()方法 
					}
				}
			}
		})
		$("#customertbody").on("click", "button", function() {
			var _customerID = $(this).closest("tr").find("input[name='customerID']").val();
			window.parent.location = "../index.html?path=myClient/clientDetails.html?customerID="+_customerID;
		})
	</script>
</body>
</html>
